<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  detail: Object
})

const fileUrl = import.meta.env.VITE_FILE_URL
</script>

<template>
  <div class="header">退款商品</div>
  <div class="card">
    <div class="scenic">
      <img
        :src='`${fileUrl}/${props.detail?.spuListVos?.[0].imageId}`'
        alt=""
        style="width:120px"
      />
      <div class="scenic_right">
        <div class="top">
          <div class="name">
            {{ props.detail?.spuListVos?.[0]?.spotName }}
          </div>
          <div class="price">
            <span class="icon">￥</span>
            <span class="number">{{props.detail?.actualPrice}}</span>
          </div>
        </div>
        <div class="bottom">
          <div>{{`${props.detail?.spuListVos?.[0]?.orderSkuVo?.skuName} ${props.detail?.buyCount}`}} 张</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.header{
  font-size: 1.4rem;
  color: #333333;
  font-weight: bold;
  margin-bottom: 1rem;
}
.card{
  background: #FFFFFC;
  box-shadow: 0 1.2rem 2rem 0 rgba(2,95,38,0.05);
  border-radius: 1rem;
  padding: 1.5rem;
  .scenic{
    display: flex;
    height: 8rem;
    img{
      height: 8rem;
      width: auto;
      border-radius: .5rem;
    }
    .scenic_right{
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 1rem;
      .top{
        display: flex;
        justify-content: space-between;
        .name{
          font-size: 1.6rem;
          color: #333333;
          font-weight: bold;
          line-height: 1.9rem;
          word-break: break-all;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
        }
        .price{
          margin-left: 1rem;
          font-weight: bold;
          color: #ED6316;
          .icon{
            font-size: 1.4rem;
          }
          .number{
            font-size: 1.8rem;
          }
        }
      }
      .bottom{
        color: #999999;
        font-size: 1.2rem;
        line-height: 1.4rem;
      }
    }
  }
}
</style>